<template>
  <b-container fluid>
    <b-row>
      <b-col>
        <div class="control-group pull-left management-control-group">
          <div class="controls" style="margin-right:10px">
            <span class="help-inline">ID：</span>
            <b-form-input v-model="item.id" size="sm" disabled placeholder="ID"></b-form-input>
          </div>
        </div>
        <div class="control-group pull-left management-control-group">
          <div class="controls">
            <span class="help-inline">名称：</span>
            <b-form-input v-model="item.name" size="sm" disabled placeholder="名称"></b-form-input>
          </div>
        </div>
      </b-col>
      <div class="w-100"></div>
      <b-col>
        <div style="margin-top:5px;">
          <span style="float:left; margin-bottom: 5px;">描述</span>
          <b-form-textarea v-model="item.description" style="width: 100%;" disabled placeholder="还未描述信息" :rows="3" :max-rows="6">
          </b-form-textarea>
          <pre class="mt-3"></pre>
        </div>
      </b-col>
      <div class="w-100"></div>
      <b-col>
        <b-table bordered small striped hover :items="item.in" :fields="inputTable.fields"></b-table>
      </b-col>
      <b-col>
        <b-table bordered small striped hover :items="item.out" :fields="outTable.fields"></b-table>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
// 查看网元能力详细Modal
// 表格：功能有过滤,排序，limit等功能默认都是未开启的
export default {
  name: "NetWorkInfoModal",
  props: ["item"],
  data() {
    return {
      inputTable: {
        fields: [
          {
            key: "name",
            label: "入参"
          },
          {
            key: "isnecessary",
            label: "必要"
          },
          {
            key: "description",
            label: "描述"
          }
        ],
        items: [
          {
            name: "测试入参",
            require: true,
            description: "这是描述信息"
          }
        ]
      },
      outTable: {
        fields: [
          {
            key: "name",
            label: "出参"
          },
          {
            key: "isnecessary",
            label: "总有"
          },
          {
            key: "description",
            label: "描述"
          }
        ],
        items: [
          {
            name: "测试出参",
            require: true,
            description: "这是描述信息"
          }
        ]
      }
    };
  }
};
</script>
<style lang="scss">
</style>
